import { observer } from 'mobx-react';
import { useEffect } from 'react';
import ChartsConfig from '../../../config/ChartsConfig';
import { StatisticType } from '../../../services/StatisticService';
import StatisticStore from '../../../stores/StatisticStore';
import './Statistic.scss';
import { StatisticTabs } from './StatisticTabs';
import { numFormatter } from "../../../utils/globalFuncs";
import NoData from '../NoData';
import ChartStore from '../../../stores/ChartStore';


export const Statistic = observer(() => {
    useEffect(() => {
        if (!ChartStore.pending) {
            StatisticStore.paintChart();
        }
    }, []);
    var tips: string[] = ChartsConfig.statisticTabs.find((t) => t.type === StatisticStore.type)?.tips || [];
    return (
        <div>
            {
                StatisticStore.noData ? <NoData /> : <div className="statisticWrapper">
                    <StatisticTabs />
                    <div className="chartWraper">
                        <div id="statisticChart" ></div>
                        <div className="tipsWrapper">
                            <div className="tips"><div className="line1"></div> <div className="tipsInfo">{tips[0]}</div> </div>
                            <div className="tips"><div className="line2"></div> <div className="tipsInfo">{tips[1]}</div> </div>
                        </div>
                        {StatisticStore.type === StatisticType.assets ? <div className='statisInfo'>
                            <div className="content">
                                <div>长期债务股本比</div>
                                <div className="value">{((StatisticStore.assets?.long_term_debt_to_equity || 0) * 100).toFixed(2) || 'N/A'}%</div>
                            </div>
                            <div className="content">
                                <div>债务股本比</div>
                                <div className="value">{((StatisticStore.assets?.total_debt_to_equity || 0) * 100).toFixed(2)}%</div>
                            </div>

                            <div className="content">
                                <div>流动比率</div>
                                <div className="value">{(StatisticStore.assets?.current_ratio || 0).toFixed(2) || 'N/A'}%</div>
                            </div>

                            <div className="content">
                                <div>速动比率</div>
                                <div className="value">{(StatisticStore.assets?.quick_ratio || 0).toFixed(2) || 'N/A'}%</div>
                            </div>
                        </div> : StatisticStore.type === StatisticType.incomes ? <div className='statisInfo'>
                            <div className="content">
                                <div>投资回报率</div>
                                <div className="value">{((StatisticStore.incomes?.return_on_investment || 0) * 100).toFixed(2)}%</div>
                            </div>

                            <div className="content">
                                <div>净利润率</div>
                                <div className="value">{((StatisticStore.incomes?.net_profit_margin || 0) * 100).toFixed(2)}%</div>
                            </div>

                            <div className="content">
                                <div>营业利润率</div>
                                <div className="value">{((StatisticStore.incomes?.operating_margin || 0)).toFixed(2) || 'N/A'}%</div>
                            </div>

                            <div className="content">
                                <div>毛利润率</div>
                                <div className="value">{((StatisticStore.incomes?.gross_margin || 0)).toFixed(2) || 'N/A'}%</div>
                            </div>
                        </div> : <div className='statisInfo'>
                            <div className="content">
                                <div>每股回报</div>
                                <div className="value">{((StatisticStore.cashFlows?.revenue_per_common_share || 0)).toFixed(2) || 'N/A'}</div>
                            </div>

                            <div className="content">
                                <div>营业现金流</div>
                                <div className="value">{numFormatter((StatisticStore.cashFlows?.operating_cash_flow || 0), 2) || 'N/A'}</div>
                            </div>
                        </div>
                        }

                        <div className="clear"></div>
                    </div>

                </div>
            }
        </div>

    );
});
